{% extends '__base__.html' %}
{% block title %}employees{% endblock %}
{% block beforehead %}

<script>
function init(data) {
    var emps = new Vue({
        el: '#emps-list',
        data: {
            employees: data.employees
        },
        methods: {
            edit_employee: function (employee) {
                location.assign('/ui/employees/edit?id=' + employee[0]);
            },
            delete_employee: function (employee) {
                if (confirm('Are you sure you want to delete the selected item?')) {
                    postJSON('/services/employees/' + employee[0] + '/delete', function (err, r) {
                        refresh();
                    });
                }
            }
        }
    });
    $('#emps-list').show();
}

$(function() {
    getJSON('/services/employees',
    function (err, results) {
        if (err) {
            return fatal(err);
        }
        $('#loading').hide();
        init(results);
    });
});
</script>

{% endblock %}

{% block content %}

    <div id="error" class="uk-width-1-1">
    </div>

    <div id="loading" class="uk-width-1-1 uk-text-center">
        <span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> loading...</span>
    </div>

    <div id="emps-list" class="uk-width-1-1">
        <a href="/ui/employees/add" class="uk-button uk-button-primary"><i class="uk-icon-plus"></i> ADD </a>

        <table class="uk-table uk-table-hover">
            <thead>
                <tr>
                    <th class="uk-width-2-10">ID</th>
                    <th class="uk-width-2-10">CODE</th>
                    <th class="uk-width-2-10">NAME</th>
                    <th class="uk-width-1-10">ACTION</th>
                </tr>
            </thead>
            <tbody>
                <tr v-repeat="employee: employees" >
                    <td>
                        <a target="_blank" v-attr="href: ''" v-text="employee[0]"></a>
                    </td>
                    <td>
                        <a target="_blank" v-attr="href: ''" v-text="employee[1]"></a>
                    </td>
                    <td>
                        <a target="_blank" v-attr="href: ''" v-text="employee[2]"></a>
                    </td>
                    <td>
                        <a href="#0" v-on="click: edit_employee(employee)"/><i class="uk-icon-edit"></i>&nbsp;&nbsp;&nbsp;&nbsp;
                        <a href="#0" v-on="click: delete_employee(employee)"/><i class="uk-icon-trash-o"></i>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

{% endblock %}
